<!--新增编辑地址-->
<template>
  <div class="editaddress">
    <div class="page-title">
      <p>{{ pageTitle }}</p>
    </div>
    <div class="container editaddress-frame">
      <div class="label-frame">
        <span>Address Info</span>
        <div class="default-frame">
          <span style="margin-top: 0.2rem; margin-right: 0.2rem"
            >Default address</span
          >
          <van-switch v-model="defaultAddrees" size="1rem" />
        </div>
      </div>
      <div
        class="editaddress-panel"
        v-for="(item, add) in mustNewAddList"
        :key="add"
      >
        <span class="info-label"
          >{{ item.label
          }}<span v-if="item.must" style="color: red">*</span></span
        >
        <div class="info-panel" v-if="item.type == 'input'">
          <input
            class="info-input"
            :placeholder="item.place"
            v-model="item.value"
            @input="emailInput"
          />
        </div>
        <div class="info-panel" v-else-if="item.type == 'select'">
          <el-select
            class="info-input"
            style="padding-left: 0"
            v-model="mustNewAddList[2].value"
            filterable
            clearable
            placeholder="Please select a country"
          >
            <el-option
              v-for="item in countryList"
              :key="item.code"
              :label="item.code + ' - ' + item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <sub-btn class="container" title="SAVE" @clickBtn="clickBtn" />
    <div class="container tips-frame">
      <p class="tips-1">
        Please fill in the receiving address information carefully for each
        customer, so as to avoid any extra cost or even impact on customs
        clearance and delivery after the goods arrive at the destination
        country. The relevant issues are as follows:
      </p>
      <p class="tips-2">
        【1】The sender gives wrong or incomplete address data of the recipient,
        such as the recipient's zip code, city, country, address content, etc.;
        if the secondary delivery is not accepted, the sender shall contact the
        logistics company's staff to pay the secondary delivery transportation
        fee
      </p>
      <p class="tips-2">
        【2】 The addressee has moved away from the address indicated on the
        shipping label or bill of lading. If the addressee has moved, or the
        hotel guest has checked out at the time of dispatch; if the secondary
        dispatch is not accepted, the staff of the logistics company shall be
        contacted to pay for the secondary dispatch
      </p>
      <p class="tips-2">
        【3】 The addressee has left the company marked on the shipping label or
        bill of lading, and the company refuses to sign for it. If the second
        delivery is not accepted, the staff of the logistics company shall be
        contacted to pay for the second delivery
      </p>
      <p class="tips-2">
        【4】 The package has arrived in the destination country. If you need to
        change the receiving address, you need to charge $23 for the change of
        address, or contact the logistics company to pay for the change of
        address.
      </p>
      <p class="tips-2">
        【5】 If the address information of the recipient is in a remote area,
        the recipient will incur a delivery fee of $35 in the remote area, or
        contact the logistics company to pay for the change of address.
      </p>
      <p class="tips-1">
        Please confirm that the recipient's address is correct and the mobile
        phone is unblocked. Always pay attention to our email information. If
        the recipient's information is incomplete, all responsibilities and
        expenses shall be borne by the recipient, and missyesh shall not be
        liable.
      </p>
    </div>
  </div>
</template>
<script>
import tool from "@/common/tool.js";
export default {
  data() {
    return {
      pageTitle: "New address",
      defaultAddrees: false,
      //表单
      mustNewAddList: [
        {
          label: "Consignee",
          place: "Fill in the name of the consignee",
          type: "input",
          must: true,
          key: "recipient_name",
          value: "",
        },
        {
          label: "Mobile No",
          place: "Fill in the Mobile",
          type: "input",
          must: true,
          key: "telephone",
          value: "",
        },
        {
          label: "Countries",
          place: "Choose a country",
          type: "select",
          must: true,
          key: "country_code",
          value: "",
          text: "",
        },
        {
          label: "State",
          place: "Fill in Province",
          type: "input",
          must: true,
          key: "state_name",
          value: "",
        },
        {
          label: "City",
          place: "Fill in the city",
          type: "input",
          must: true,
          key: "city_name",
          value: "",
        },
        {
          label: "Address",
          place: "Fill in the detailed address",
          type: "input",
          must: true,
          key: "address",
          value: "",
        },
        {
          label: "Postal Code",
          place: "Fill in the Postcode",
          type: "input",
          must: true,
          key: "postal_code",
          value: "",
        },
        {
          label: "Contact Email:",
          place: "Fill in the Contact Email",
          type: "input",
          must: true,
          key: "email",
          value: "",
        },
        {
          label: "Company Name",
          place: "Fill in the Company Name",
          type: "input",
          must: false,
          key: "company_name",
          value: "",
        },
        {
          label: "Tax Number",
          place: "Fill in the city",
          type: "input",
          must: false,
          key: "tax_number",
          value: "",
        },
      ],
      countryShow: false,
      state: "newly",
      countrySelIndex: 0,
      id: "", //编辑时的id
      country_name: "",
      emailCheck: true,
    };
  },
  computed: {
    //国家列表
    countryList() {
      return this.$store.state.over.countryList;
    },
    addressList() {
      return this.$store.state.user.addressList;
    },
  },
  activated() {
    if (this.$route.query.type == undefined) {
      this.state = "newly";
      this.pageTitle = "New address";
      this.mustNewAddList.forEach((item) => {
        item.value = "";
      });
      this.defaultAddrees = false;
    } else if (this.$route.query.type == "select") {
      this.state = "select";
      this.pageTitle = "New address";
      this.mustNewAddList.forEach((item) => {
        item.value = "";
      });
      this.defaultAddrees = false;
    } else {
      this.state = "edit";
      this.pageTitle = "Edit address";
      this.intUpdateData();
    }
  },
  methods: {
    //邮箱校验
    emailInput(val) {
      let reg =
        /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
      let bool = reg.test(this.mustNewAddList[7].value);
      this.emailCheck = bool;
    },
    //初始化编辑信息
    intUpdateData() {
      let addressInfo = tool.getStorage("addressInfo"); //获取编辑信息
      this.defaultAddrees = addressInfo.acquiesce == 1 ? true : false;
      this.id = addressInfo.id;
      this.mustNewAddList.forEach((item) => {
        item.value = addressInfo[item.key];
        if (item.key == "country_code") {
          item.text = addressInfo.country_name;
        }
      });
    },
    //选择国家
    selectCount() {
      this.countryShow = true;
    },
    //选中国家
    countConfirm(val) {
      this.mustNewAddList[2].value = val.code;
      this.mustNewAddList[2].text = val.name;
      this.countryShow = false;
    },
    //取消选中
    countCancel() {
      this.countryShow = false;
    },
    //保存
    async clickBtn() {
      this.tips.startLoadingToast();
      let form = {};
      for (let i = 0; i < this.mustNewAddList.length; i++) {
        form[this.mustNewAddList[i].key] = this.mustNewAddList[i].value;
        if (this.mustNewAddList[i].must && this.mustNewAddList[i].value == "") {
          this.$toast(this.mustNewAddList[i].place);
          return;
        }
      }
      if (!this.emailCheck) {
        this.$toast("请检查邮箱格式");
        return;
      }
      console.log(this.mustNewAddList);
      form["acquiesce"] = this.defaultAddrees ? 1 : 0;
      form["country_name"] = "";
      for(let i=0;i<this.countryList.length;i++){
        if(this.countryList[i].code==form.country_code){
          form.country_name = this.countryList[i].name;
        }
      }
      if (this.isLogin) {
        if (this.state == "newly" || this.state == "select") {
          let res = await this.$store.dispatch("user/addressAdd", form);
          this.tips.closeToast();
          if (res.code == 0) {
            this.$store.commit("user/setRefreshAddress", true);
            this.$toast("Added successfully");
            this.$router.back();
          } else {
            this.$toast.fail(res.msg);
          }
        } else {
          form["id"] = this.id;
          let res = await this.$store.dispatch("user/addressEdit", form);
          this.tips.closeToast();
          if (res.code == 0) {
            this.$store.commit("user/setRefreshAddress", true);
            this.$toast("Modified successfully");
            this.$router.back();
          } else {
            this.$toast.fail(res.msg);
          }
        }
      } else {
        let _addressList = this.addressList;
        console.log(form);
        if (this.state == "newly" || this.state == "select") {
          form["id"] = Math.random();
          _addressList.push(form);
        } else {
          form["id"] = this.id;
          for (let i = 0; i < _addressList.length; i++) {
            if (_addressList[i].id == form.id) {
              _addressList[i] = form;
            }
          }
        }
        this.$store.commit("user/setAddressList", _addressList);
        setTimeout(() => {
          this.tips.closeToast();
          this.$router.back();
          tool.setStorage("addressList", _addressList);
        }, 1000);
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "address.less";
</style>